Ts migration(src/pages): Migrated assigned files #6829

M-Ivan · 2022-06-26T20:57:53Z

Description

Migrated:

src/pages/404.js
src/pages/assets.js
src/pages/bug-bounty.js
src/pages/community.js

Related Issue

PR Is related with 6392

…component functions segregation

gatsby-cloud · 2022-06-26T21:29:51Z

Gatsby Cloud Build Report

ethereum-org-website-dev

🎉 Your build was successful! See the Deploy preview here.

Build Details

View the build logs here.

🕐 Build time: 27m

pettinarip

@M-Ivan thanks for the contribution!

Similar feedback as in your other PR. Lets use PageProps + the auto-generated query type.

You can take a look at the src/pages/index.tsx file to take it as an example.
Also, take a look at this doc for more context https://github.com/ethereum/ethereum-org-website/blob/dev/docs/typescript.md

pettinarip · 2022-06-30T21:02:00Z

src/pages/404.tsx

  <StyledPage>
    <Content>
      <h1>
        <Translation id="we-couldnt-find-that-page" />
      </h1>
      <p>
-        <Translation id="try-using-search" />{" "}


We need that extra space

pettinarip · 2022-06-30T21:11:15Z

src/pages/404.tsx

@@ -10,14 +10,14 @@ const StyledPage = styled(Page)`
  margin-top: 4rem;
 `

-const NotFoundPage = () => (
+const NotFoundPage: React.FC = () => (


Since this is a Page component, we are not defining it as a React.FC. Lets keep the consistency across the other pages by only defining the props with PageProps.

Suggested change

const NotFoundPage: React.FC = () => (

const NotFoundPage = (props: PageProps) => {

pettinarip · 2022-06-30T21:13:49Z

src/pages/assets.tsx

+  data: Record<string, IGatsbyChildImageSharp>
+}
+
+const AssetsPage: React.FC<IProps> = ({ data }) => {


As mentioned in the other PR, lets use PageProps from gatsby and use the auto-generated types using Queries.{NameOfTheQuery}.

pettinarip · 2022-06-30T21:15:41Z

src/pages/assets.tsx

@@ -116,7 +143,7 @@ const AssetsPage = ({ data }) => {
          <AssetDownload
            title={translateMessageId("page-assets-hero", intl)}
            alt={translateMessageId("page-assets-hero", intl)}
-            image={data.hero}
+            image={getImage(data.hero)}


I think we don't need to do getImage here since AssetDownload is already doing that for us.

pettinarip · 2022-06-30T21:16:19Z

src/pages/bug-bounty.tsx

+  link: string
+}
+
+const BugBountiesPage: React.FC<IProps> = ({ data, location }) => {


Same as the other pages, lest use PageProps.

pettinarip · 2022-06-30T21:16:51Z

src/pages/bug-bounty.tsx

@@ -326,7 +361,7 @@ const BugBountiesPage = ({ data, location }) => {
    ? getImage(data.lighthouseDark)
    : getImage(data.lighthouseLight)

-  const specs = [
+  const specs: ISpec[] = [


For consistency,

Suggested change

const specs: ISpec[] = [

const specs: Array<ISpec> = [

pettinarip · 2022-06-30T21:17:11Z

src/pages/community.tsx

+  description: string
+}
+
+const CommunityPage: React.FC<IProps> = ({ data }) => {


Same here, PageProps

pettinarip · 2022-06-30T21:17:24Z

src/pages/community.tsx

@@ -316,7 +335,7 @@ const CommunityPage = ({ data }) => {
    alt: translateMessageId("page-community-hero-alt", intl),
  }

-  const cards = [
+  const cards: ICard[] = [


Suggested change

const cards: ICard[] = [

const cards: Array<ICard> = [

…hod issue with typescript

…gatsby call, also fixed type of image in AssetDownload.tsx to be Record<string, unknown>

…moved unnecessary export statements

M-Ivan · 2022-07-09T18:56:24Z

src/components/AssetDownload.tsx

@@ -26,7 +26,7 @@ interface IPropsWithSVG extends IPropsBase {
 }
 interface IPropsWithImage extends IPropsBase {
  svg?: never
-  image: string
+  image: Record<string, unknown>


@pettinarip since this prop is supposed to receive the GatsbyImageData object i changed this type to match any object. It was set to string before and it was a pain to make it work when passing a Gatsby auto-generated type (from the Queries namespace).

This is nice! as commented in the other comment, we will leave it as any for now. Once we have better types from gatsby we will refactor and fix all the images types 👍🏼

M-Ivan · 2022-07-09T19:02:18Z

src/pages/assets.tsx

@@ -117,7 +118,7 @@ const AssetsPage = ({ data }) => {
          <AssetDownload
            title={translateMessageId("page-assets-hero", intl)}
            alt={translateMessageId("page-assets-hero", intl)}
-            image={data.hero}
+            image={data.hero as Record<string, unknown>}


@pettinarip Type assetion here is for the AssetDownload component prop to don't cry. It actually complains a lot because the props of the component expect a non-nullable object, even tho in the component this specific prop value is used for a gatsby call is using getSrc, a null-safe method (docs here)

This is fine but there are some issues with the getImage types. In the overrides.d.ts we are overriding the types for this function to basically accepts any as its argument. So, in order to keep it simple, we can just accept any in AssetDownload while we wait for a proper fix.

pettinarip

@M-Ivan thanks for the PR! this looks great! I'm pushing some minor changes and reverting the md changes.

pettinarip · 2022-07-14T19:16:47Z

src/pages/bug-bounty.tsx

+}
+
+interface ISpec {
+  title: JSX.Element


Suggested change

title: JSX.Element

title: ReactNode

pettinarip · 2022-07-15T02:11:14Z

src/pages/assets.tsx

@@ -117,7 +118,7 @@ const AssetsPage = ({ data }) => {
          <AssetDownload
            title={translateMessageId("page-assets-hero", intl)}
            alt={translateMessageId("page-assets-hero", intl)}
-            image={data.hero}
+            image={data.hero as Record<string, unknown>}


This is fine but there are some issues with the getImage types. In the overrides.d.ts we are overriding the types for this function to basically accepts any as its argument. So, in order to keep it simple, we can just accept any in AssetDownload while we wait for a proper fix.

M-Ivan added 6 commits June 26, 2022 16:03

Feat(pages/404): Migrated 404.js => 404.tsx

d07548e

Fix(pages/404): Removed unnecessary round branckets string on 404 page

564cb30

Feat(pages/404): Created interface for props and solved type errors

7e48a05

Feat(pages/bug-bounty): Created interfaces for the page and improved …

b7b59a1

…component functions segregation

Feat(pages/community): Community.js => Community.tsx

f8dd080

Feat(pages/community): Created interfaces for the community hub page

a0929e9

M-Ivan requested review from samajammin, wackerow, corwintines, pettinarip and minimalsm as code owners June 26, 2022 20:57

github-actions bot added content 🖋️ This involves copy additions or edits review needed 👀 labels Jun 26, 2022

minimalsm assigned pettinarip Jun 27, 2022

minimalsm added the typescript-migration label Jun 27, 2022

pettinarip requested changes Jun 30, 2022

View reviewed changes

M-Ivan added 7 commits July 9, 2022 14:41

Fix(git): Merged branch 'dev' into base and solved conflicts

8c8d376

Fix(bug-bounty): Fixed the declaration of page props and the sort met…

f8de08a

…hod issue with typescript

Fix(404): Fixed props definition

06bfd9c

Fix(assets): Fixed the props definition to use PageProps

2cd06cd

Fix(assets): Fixed props definition and removed unnecessary GetImage …

556ece2

…gatsby call, also fixed type of image in AssetDownload.tsx to be Record<string, unknown>

Fix(community): Fixed props definition, array type declaration and re…

ab44844

…moved unnecessary export statements

Fix(bug-bounty): Removed unnecessary export statements

9c23674

github-actions bot added the translation 🌍 This is related to our Translation Program label Jul 9, 2022

M-Ivan commented Jul 9, 2022

View reviewed changes

M-Ivan and others added 3 commits July 10, 2022 00:14

Fix(404): Added extra space

71c5447

Merge branch 'dev' into review-ivan2

f790f8b

revert changes on md files

a7c1f76

pettinarip added 3 commits July 14, 2022 16:15

simplify typing in assetdownload component

9ac4c16

minor fixes on types

aec7503

Merge branch 'dev' into review-ivan2

e6a7b4e

pettinarip approved these changes Jul 15, 2022

View reviewed changes

pettinarip added 2 commits July 15, 2022 12:23

call getImage on header image

ecf33ad

Merge branch 'dev' into review-ivan2

596c351

pettinarip merged commit 69be560 into ethereum:dev Jul 16, 2022

corwintines mentioned this pull request Jul 25, 2022

Deploy v4.9.0 #7176

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Ts migration(src/pages): Migrated assigned files #6829

Ts migration(src/pages): Migrated assigned files #6829

M-Ivan commented Jun 26, 2022

gatsby-cloud bot commented Jun 26, 2022 •

edited

Loading

pettinarip left a comment

pettinarip Jun 30, 2022

pettinarip Jun 30, 2022

pettinarip Jun 30, 2022

pettinarip Jun 30, 2022

pettinarip Jun 30, 2022

pettinarip Jun 30, 2022

pettinarip Jun 30, 2022

pettinarip Jun 30, 2022

M-Ivan Jul 9, 2022

pettinarip Jul 15, 2022

M-Ivan Jul 9, 2022

pettinarip Jul 15, 2022

pettinarip left a comment

pettinarip Jul 14, 2022

pettinarip Jul 15, 2022

	const NotFoundPage: React.FC = () => (
	const NotFoundPage = (props: PageProps) => {

Ts migration(src/pages): Migrated assigned files #6829

Ts migration(src/pages): Migrated assigned files #6829

Conversation

M-Ivan commented Jun 26, 2022

Description

Related Issue

gatsby-cloud bot commented Jun 26, 2022 • edited Loading

Gatsby Cloud Build Report

Build Details

pettinarip left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

pettinarip left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

gatsby-cloud bot commented Jun 26, 2022 •

edited

Loading